<template>
    <div>
        <div class="finace_title">数据汇总</div>
        <div class="flexbox flexcenter finace_type">
            <div class="finace_item" :class="{'active':countType==3}" @click="selectCountType(3)">全部</div>
            <div class="finace_item" :class="{'active':countType==1}" @click="selectCountType(1)">自营</div>
            <div class="finace_item" :class="{'active':countType==2}" @click="selectCountType(2)">合作成交</div>
        </div>
        <AllModel v-if="countType==3" :countData="countData"/>
        <SelfModel v-else-if="countType==1" :countData="countData"/>
        <CoModel @getCountData="getCountData" v-else-if="countType==2" :countData="countData" :date="date" :shopInfo="shopInfo"/>
        <!-- 数据汇总 -->
    </div>
</template>

<script>
import AllModel from './AllModel.vue';
import SelfModel from './SelfModel.vue';
import CoModel from './CoModel.vue';
export default {
    props:["countType","countData","date","shopInfo"],
    name: "",
    data() {
        return {
            
        };
    },
    created() {
        
    },
    beforeDestroy() {},
    methods: {
        selectCountType(type){
            this.countType = type
            this.$emit('selectCountType',type)
        },

        getCountData(){
            this.$emit("getCountData")
        }
    },
    components: {
        AllModel,
        SelfModel,
        CoModel
    },
};
</script>


<style scoped>


.carrier_title {
    margin-top: 24px;
}
.finace_type {
    margin-top: 12px;
}
.finace_item {
    width: 88px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    font-size: 14px;
    color: #b4b7bd;
    border-radius: 4px;
    background: rgba(165, 177, 209, 0.08);
    margin-right: 12px;
    cursor: pointer;
}
.finace_item.active {
    color: #4475ff;
    background: rgba(68, 117, 255, 0.08);
}

.revenue_count {
    border: 1px solid #ebebeb;
    border-radius: 6px;
    padding: 16px;
    margin-top: 12px;
}

.revenue_list {
    padding-left: 42px;
    position: relative;
    flex-wrap: wrap;
    overflow: hidden;
}
.revenue_class {
    position: absolute;
    width: 28px;
    box-sizing: border-box;
    padding: 0 6px;
    font-size: 14px;
    border-radius: 4px;
    left: 0;
    top: 0;
    bottom: 12px;
    text-align: center;
}
.revenue_class.red {
    color: #fa9393;
    background: rgba(254, 98, 98, 0.08);
    border: 1px solid rgba(254, 98, 98, 0.5);
}
.revenue_class.green {
    color: #3ed395;
    background: rgba(0, 194, 113, 0.08);
    border: 1px solid rgba(0, 194, 113, 0.5);
}
.revenue_class.gay {
    color: #a8a7a5;
    background: rgba(164, 167, 166, 0.08);
    border: 1px solid rgba(182, 182, 182, 0.5);
}
.revenue_class.blue {
    color: #92aeff;
    background: rgba(68, 117, 255, 0.08);
    border: 1px solid rgba(68, 117, 255, 0.5);
}
.revenue_item {
    padding: 12px 20px;
    border: 1px solid #f1f2f3;
    border-radius: 4px;
    width: 245px;
    height: 94px;
    box-sizing: border-box;
    margin-bottom: 12px;
    margin-right: 12px;
}
.revenue_title {
    font-size: 12px;
    color: #616c85;
    height: 17px;
}
.revenue_title svg {
    margin-left: 6px;
}
.revenue_num {
    font-family: D-DIN;
    font-weight: bold;
    line-height: 23px;
    font-size: 18px;
    height: 23px;
    color: #17233d;
    margin-top: 6px;
}
.revenue_pesent {
    font-size: 16px;
    color: #17233d;
    opacity: 0.15;
    font-family: D-DIN;
    font-weight: bold;
}
.revenue_type {
    font-size: 12px;
    height: 17px;
    margin-top: 6px;
    color: #b4b7bd;
}
.revenue_type i {
    margin: 0 5px;
}
.revenue_type .green {
    color: #00c271;
}
.carrier_list {
    margin-top: 12px;
}
.carrier_item {
    width: 580px;
    height: 100px;
    box-sizing: border-box;
    padding: 16px;
    margin-right: 12px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}
.car_right {
    font-family: D-DIN;
    color: #17233d;
    opacity: 0.2;
    font-size: 24px;
}
.carrier_item.active {
    background: rgba(68, 117, 255, 0.05);
    border: 1px solid #4475ff;
}
.carrier_item.active .car_right {
    color: #4475ff;
    opacity: 1;
}
.carrier_item .active_img {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}
.carrier_item.active .active_img {
    display: block;
}
.carrier_type {
    width: 284px;
    height: 76px;
    box-sizing: border-box;
    padding: 16px;
    margin-right: 12px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}
.car_title {
    font-size: 14px;
    color: #17233d;
    height: 20px;
}
.car_title svg {
    margin-left: 5px;
}
.carrier_type .car_num {
    height: 18px;
    margin-top: 6px;
    font-size: 13px;
}
.car_num i {
    margin: 0 5px;
}
.car_num .green {
    color: #00c271;
}
.carrier_type .car_bold {
    font-family: D-DIN;
    color: #17233d;
    font-size: 14px;
}
.type_right {
    font-family: D-DIN;
    color: #17233d;
    opacity: 0.2;
    font-size: 16px;
}
.carrier_type .active_img {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}
.carrier_type.active {
    background: rgba(68, 117, 255, 0.05);
    border: 1px solid #4475ff;
}
.carrier_type.active .type_right {
    color: #4475ff;
    opacity: 1;
}
.carrier_type.active .active_img {
    display: block;
}
.car_user .user_img {
    width: 32px;
    height: 32px;
}
.finace_title {
    font-size: 16px;
    color: #17233d;
    font-weight: bold;
    line-height: 22px;
}

.user_name {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-size: 14px;
    color: #17233d;
    height: 20px;
    line-height: 20px;
    margin-left: 8px;
}
.carrier_table {
    margin-top: 16px;
}
.car_page {
    margin-top: 20px;
}
</style>
